<template>
    <div>
        <el-form
                ref="dataForm"
                status-icon
                :model="form"
                :rules="rules"
                label-width="0px"
        >
            <template>
                <div>
                    <h5>基本信息</h5>
                    <el-divider></el-divider>
                </div>
            </template>
            <el-descriptions :column="4" border>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 姓名</template>
                    <div>{{ form.name }}</div>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">性别</template>
                    <div>{{ form.sex }}</div>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">身份证号码</template>
                    <div>{{ form.sfz }}</div>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">出生日期</template>
                    <div>{{ form.birthday }}</div>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">系统唯一识别码</template>
                    <div>{{ form.id_num }}</div>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">电话号码</template>
                    <div>{{ form.phone }}</div>
                </el-descriptions-item>

                <el-descriptions-item
                        labelStyle="width: 10%"
                        contentStyle="width: 90%"
                        span="4"
                >
                    <template slot="label">联系地址</template>
                    <div>
                        {{ form.province_name }} {{ form.city_name }}
                        {{ form.district_name }} {{ form.town_name }}
                        {{ form.village_name }} {{ form.address }}
                    </div>
                </el-descriptions-item>

            </el-descriptions>

            <template>
                <div>
                    <h5>分期信息</h5>
                    <el-divider></el-divider>
                </div>
            </template>

            <el-descriptions :column="4" border>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 检查日期</template>
                    <el-form-item prop="stages_date">
                        <el-date-picker
                                style="width:100%"
                                v-model="form.stages_date"
                                type="date"
                                placeholder="选择日期"
                                :value-format="'yyyy-MM-dd'"
                                clearable
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 分期类型</template>
                    <el-form-item prop="stages">
                        <el-select clearable placeholder="请选择" style="width: 100%" v-model="form.stages">
                            <el-option
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value"
                                    v-for="item in stages"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> T</template>
                    <el-form-item prop="stages1">
                        <el-select clearable placeholder="请选择" style="width: 100%" v-model="form.stages1">
                            <el-option
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value"
                                    v-for="item in stages1"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> N</template>
                    <el-form-item prop="stages2">
                        <el-select clearable placeholder="请选择" style="width: 100%" v-model="form.stages2">
                            <el-option
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value"
                                    v-for="item in stages2"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> M</template>
                    <el-form-item prop="stages3">
                        <el-select clearable placeholder="请选择" style="width: 100%" v-model="form.stages3">
                            <el-option
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value"
                                    v-for="item in stages3"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> TNM 分期</template>
                    <el-form-item prop="stages4">
                        <el-select clearable placeholder="请选择" style="width: 100%" v-model="form.stages4">
                            <el-option
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value"
                                    v-for="item in stages4"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 远端转移部位</template>
                    <el-form-item prop="stages5">
                        <el-select clearable placeholder="请选择" style="width: 100%" v-model="form.stages5">
                            <el-option
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value"
                                    v-for="item in stages5"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item span="3" labelStyle="width: 10%" contentStyle="width: 65%">
                    <template slot="label"> 备注</template>
                    <el-form-item prop="stages_remark">
                        <el-input type="textarea" v-model="form.stages_remark"></el-input>
                    </el-form-item>
                </el-descriptions-item>

            </el-descriptions>

            <el-descriptions :column="1" border v-if="dialogStatus !== 'formal'">
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 90%">
                    <el-form-item label=" ">
                        <el-button @click="handleDialogVisible(false)" size="small">取 消</el-button>
                        <el-button type="primary" @click="update()" size="small">确 定</el-button>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
        </el-form>
    </div>
</template>

<script>
    import { updateStages} from '@/api/data/data';
    import {listMember} from "@/api/member/member";
    import moment from "moment";

    export default {
      props: ["rowData", "dialogStatus"],
        components: {},
        data() {
            return {
                form: {
                    id: "",
                    stages:0,  //病理号
                    stages1:0,  //标本类型
                    stages2:0,  //活检日期
                    stages3:0,  //病理报告日期
                    stages4:0,  //病理诊断
                    stages5:0,  //备注
                    stages_date:"",
                    stages_remark:"",

                },
                rules: {

                },
                updateLoading: false,
                memberList: [],
                stages: [
                {text: "请选择", value: 0},

                    {text: "C临床分期", value: 1},
                    {text: "P病理分期", value: 2},
                    {text: "R再分期", value: 3},

                ],
                stages1: [
                {text: "请选择", value: 0},

                    {text: "Tx", value: 1},
                    {text: "T0", value: 2},
                    {text: "T1", value: 3},
                    {text: "Tis", value: 4},
                    {text: "T1a", value: 5},

                    {text: "T1b", value: 12},
                    {text: "T1c", value: 6},
                    {text: "T2", value: 7},
                    {text: "T2a", value: 8},
                    {text: "T2b", value: 9},
                    {text: "T3", value: 10},
                    {text: "T4", value: 11},
                ],

                stages2: [
                {text: "请选择", value: 0},
                    {text: "Nx", value: 1},
                    {text: "N0", value: 10},
                    {text: "N1", value: 2},
                    {text: "N1a", value: 3},
                    {text: "N1b", value: 4},
                    {text: "N2", value: 5},
                    {text: "N2a1", value: 6},
                    {text: "N2a2", value: 7},
                    {text: "N2b", value: 9},
                    {text: "N3", value: 8}
                ],

                stages3: [
                {text: "请选择", value: 0},
                    {text: "Mx", value: 1},
                    {text: "M0", value: 2},
                    {text: "M1", value: 3},
                    {text: "M1a", value: 4},
                    {text: "M1b", value: 5},
                    {text: "M1c", value: 6},


                ],

                stages4: [
                    {text: "请选择", value: 0},
                    {text: "0期", value: 1},
                    {text: "IA期", value: 2},
                    {text: "IA1期", value: 3},
                    {text: "IA2期", value: 4},
                    {text: "IA3期", value: 5},
                    {text: "IB期", value: 6},
                    {text: "IIA期", value: 7},
                    {text: "IIB期", value: 8},
                    {text: "III期", value: 9},
                    {text: "IIIA期", value: 10},
                    {text: "IIIB期", value: 11},
                    {text: "IIIC期", value: 12},
                    {text: "IV期", value: 13},
                    {text: "IVA期", value: 14},
                    {text: "IVB期", value: 15},
                    {text: "未获得", value: 16},
                ],

                stages5: [
                {text: "请选择", value: 0},

                    {text: "脑", value: 1},
                    {text: "骨", value: 2},
                    {text: "肝", value: 3},
                    {text: "腹膜", value: 4},
                    {text: "肾上腺", value: 5},
                    {text: "淋巴结", value: 6},
                    {text: "肺", value: 7},
                    {text: "恶性心包积液", value: 8},
                    {text: "肾", value: 9},
                    {text: "胸膜", value: 10},
                    {text: "胸腔积液", value: 11},


                ],

            };
        },
        created() {
            this.getListMember();
            if (this.dialogStatus == "update" || this.dialogStatus == "formal") {
                this.form = {...this.rowData};
              console.log(this.rowData.stages)
                 this.form.stages=parseInt(this.rowData.stages);
                 this.form.stages1=parseInt(this.rowData.stages1);

                 this.form.stages2=parseInt(this.rowData.stages2);

                 this.form.stages3=parseInt(this.rowData.stages3);

                 this.form.stages4=parseInt(this.rowData.stages4);
                 this.form.stages5=parseInt(this.rowData.stages5);


            }
        },
        methods: {
            getListMember() {
                let params = {
                    user_name: "",
                    status: "",
                    institution_id: this.$store.state.member.institution_id,
                    pageSize: 1000,
                    page: 1,
                };
                listMember(params).then((res) => {
                    if (res.code === 200) {
                        this.memberList = res.data.data;
                    } else {
                        this.msgError(res.msg);
                    }
                });
            },
            //父页面的回调事件
            handleDialogVisible(isUpdate) {
                this.dialogVisible = false;
                this.$emit("childByDialogVisible", this.dialogVisible, isUpdate);
            },
            //修改
            update() {

                this.$refs["dataForm"].validate((valid) => {
                    if (valid) {
                        this.updateLoading = true;
                        updateStages(this.form).then((response) => {
                            this.updateLoading = false;
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
        },
        watch: {},
    };
</script>
<style lang="scss" scoped="scoped">
    .el-form-item {
        margin: 0px;
    }

    .red {
        color: red;
    }

    .el-ul {
        list-style: none;
        padding: 0;
    }

    .el-list-li {
        float: left;
        position: relative;
        padding: 10px 10px 0px 0px;
    }

    .el-icon-circle-close {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 2;
        font-size: 20px;
    }
</style>
